<template>
<div id="newdemand">
  <div class="top"></div>
  <div class="bigbox">
    <div class="smallbox">
      <div class="lastbox">
  <div class="title">
    <p>发布需求</p>
  <span class="close" @click="handleReset('formValidate')">X</span>
  </div>
  <div class="body">
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" label-position="top">
        <Form-item label="需求名称" prop="dename" >
            <Input v-model="formValidate.dename" placeholder="请填写需求名称"></Input>
        </Form-item>
        <Form-item label="团队" prop="team">
            <Radio-group v-model="formValidate.team">
                <Radio label="企业">企业</Radio>
                <Radio label="个人">个人</Radio>
            </Radio-group>
        </Form-item>
        <Form-item label="类型" prop="type">
            <Radio-group v-model="formValidate.type">
                <Radio label="算法需求">算法需求</Radio>
                <Radio label="硬件需求">硬件需求</Radio>
            </Radio-group>
        </Form-item>
        <Form-item label="公司名称" prop="firmname">
            <Input v-model="formValidate.firmname" placeholder="请填写公司名称"></Input>
        </Form-item>
        <Form-item label="联系人姓名" prop="username">
            <Input v-model="formValidate.username" placeholder="请填写联系人姓名"></Input>
        </Form-item>
        <Form-item label="手机号码" prop="phone">
            <Input v-model="formValidate.phone" placeholder="请填入手机号码"></Input>
        </Form-item>
        <Form-item label="地区" prop="city">
            <Select v-model="formValidate.city" placeholder="请选择所在地">
                <Option value="全国">全国</Option>
                <Option value="北京市">北京市</Option>
                <Option value="天津市">天津市</Option>
                <Option value="上海市">上海市</Option>
                <Option value="重庆市">重庆市</Option>
                <Option value="河北省">河北省</Option>
                <Option value="山西省">山西省</Option>
                <Option value="辽宁省">辽宁省</Option>
                <Option value="吉林省">吉林省</Option>
                <Option value="黑龙江省">黑龙江省</Option>
                <Option value="江苏省">江苏省</Option>
                <Option value="浙江省">浙江省</Option>
                <Option value="安徽省">安徽省</Option>
                <Option value="福建省">福建省</Option>
                <Option value="江西省">江西省</Option>
                <Option value="山东省">山东省</Option>
                <Option value="河南省">河南省</Option>
                <Option value="湖北省">湖北省</Option>
                <Option value="湖南省">湖南省</Option>
                <Option value="广东省">广东省</Option>
                <Option value="海南省">海南省</Option>
                <Option value="四川省">四川省</Option>
                <Option value="贵州省">贵州省</Option>
                <Option value="云南省">云南省</Option>
                <Option value="台湾省">台湾省</Option>
                <Option value="内蒙古自治区">内蒙古自治区</Option>
                <Option value="广西壮族自治区">广西壮族自治区</Option>
                <Option value="西藏自治区">西藏自治区</Option>
                <Option value="宁夏回族自治区">宁夏回族自治区</Option>
                <Option value="新疆维吾尔自治区">新疆维吾尔自治区</Option>
            </Select>
        </Form-item>
        <Form-item label="开发周期" prop="date">
            <Input v-model="formValidate.date" placeholder="请填写预计开发所需时间"></Input>
        </Form-item>
        <Form-item label="需求描述" prop="desc">
            <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请描述需求详情"></Input>
        </Form-item>
        <Form-item label="达标要求" prop="demand">
            <Input v-model="formValidate.demand" placeholder="请填写达标要求"></Input>
        </Form-item>
        <Form-item label="硬件要求" prop="harddemand">
            <Input v-model="formValidate.harddemand" placeholder="请填写硬件要求"></Input>
        </Form-item>
        <Form-item label="系统和软件版本" prop="versions">
            <Input v-model="formValidate.versions" placeholder="请填写系统和软件版本"></Input>
        </Form-item>
        <div class="btn">
          <div class="rightbtn">
        <Form-item>
            <Button type="text" @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
            <Button type="primary" @click="handleSubmit('formValidate')">确定</Button>
        </Form-item>
        </div>
        </div>
    </Form>
    </div>
    </div>
    </div>
    </div>
    </div>
</template>
<script>
import {addDemand} from 'api/demand.js'
    export default {
      name:'NewDemand',
        data () {
            return {
                formValidate: {
                    dename: '',
                    team:'',
                    type:'',
                    firmname:'',
                    username:'',
                    phone: '',
                    city: '',
                    date:'',
                    desc: '',
                    demand: '',
                    harddemand: '',
                    versions: ''
                },
                ruleValidate: {
                    dename: [
                        { required: true, message: '需求名称不能为空', trigger: 'blur' }
                    ],
                    team: [
                        { required: true, message: '请选择团队', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择类型', trigger: 'blur' }
                    ],
                    firmname: [
                        { required: true, message: '公司名称不能为空', trigger: 'blur' }
                    ],
                    username: [
                        { required: true, message: '联系人姓名不能为空', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '手机号码不能为空', trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: '请选择城市', trigger: 'change' }
                    ],
                    date: [
                        { required: false, trigger: 'blur' }
                    ],
                    desc: [
                        { required: true, message: '需求描述不能为空', trigger: 'change' }
                    ],
                    demand: [
                        { required: false, trigger: 'blur' }
                    ],
                    harddemand: [
                        { required: false, trigger: 'blur' }
                    ],
                    versions: [
                        { required: false, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('提交成功!');
                        let data={};
                        data.title=this.formValidate.dename;
                        data.team=this.formValidate.team;
                        data.requestType=this.formValidate.type;
                        data.contact=this.formValidate.username;
                        data.phone=this.formValidate.phone;
                        data.area=this.formValidate.city;
                        data.period=this.formValidate.date;
                        data.content=this.formValidate.desc;
                        data.standard=this.formValidate.demand;
                        data.requires=this.formValidate.harddemand;
                        data.version=this.formValidate.versions;
                        data.company=this.formValidate.firmname;
                        data.userId=sessionStorage.getItem('id');
                        addDemand('/api/request/insertRequest',data)
                        .then(res=>{
                        this.$Notice.success({
                        title:'发表成功',
                        duration:5})
                        this.$refs[name].resetFields();
                        })
                        .catch(err=>{
                        this.$Notice.error({
                         title:'发表失败',
                         duration:5});
                        });
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
                this.$emit('close',false);
                document.body.removeAttribute('style');
            }
        }
    }
</script>
<style>
#newdemand .top{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 1000;
  background-color: rgba(55, 55, 55, .6);
}
#newdemand .bigbox{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
  z-index: 1050;
}
#newdemand .smallbox{
  position: relative;
  width: auto;
  margin: 0 auto;
  outline: none;
  top: 100px;
  width: 820px;
}
#newdemand .lastbox{
  position: relative;
  background-color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 20px;
  background-clip: padding-box;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}
#newdemand .title{
  border-bottom: 1px solid #e8eaec;
  padding: 14px 16px;
  line-height: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}
#newdemand .body{
  padding: 1rem;
  font-size: 14px;
  line-height: 1.5;
}
#newdemand .btn{
  position: relative;
  right: 0px;
  bottom: 0px;
  width: 100%;
  border-top: 1px solid #e8eaec;
}
#newdemand .btn .rightbtn{
  position: relative;
  left: 70%;
  bottom: -20px;
}
#newdemand .ivu-input{
  height: 40px;
  font-size: 14px;
}
#newdemand .ivu-form-item-content{
  margin-left: 0!important;
}
#newdemand .ivu-form .ivu-form-item-label{
  width: 100%!important;
  text-align: left;
  font-size: 15px;
}
#newdemand .ivu-radio-wrapper{
  font-size: 14px;
}
#newdemand .ivu-btn-primary,
#newdemand .ivu-btn-text{
  width: 5rem;
  height: 2.5rem;
  margin: 0 .625rem;
}
#newdemand .ivu-btn-primary{
  border-color: #8c30f5;
  background-color: #8c30f5;
}
#newdemand .ivu-btn-text:hover{
  color: #8c30f5;
  border-color: #8c30f5;
}
#newdemand .close{
  cursor: pointer;
  position: absolute;
  right: 1.8125rem;
  top: 1.125rem;
  width: 27px;
  height: 27px;
  font-size: 24px;
}
</style>
